<template>
  <div class="login_page">
      <div class="login_main">

        <!-- logo -->
        <div class="login_main__logo">
            <el-image fit="cover" class="logo_img" :src="imgs.login_logo"></el-image>
        </div>

        <div class="login_main__content">

            <div class="login_main__content__title">
              <p id="title">{{ $globalData.title}}</p>
              <p id="subtitle">信息管理平台</p>
            </div>
          
            <div class="login_main_content__form">
              <div class="login_input__box">
                  <!-- <Aim />                 -->
      
                  <p class="login-form-title">用户名 / 邮箱：</p>
                  <el-input
                    v-model="username"
                    placeholder="请输入用户名 / 邮箱"
                    class="input-comp"
                    prefix-icon="el-icon-message"
                  >
                  </el-input>
              </div>

              <div class="login_input__box">
                  <p class="login-form-title">密码：</p>

                  <el-input
                    v-model="password"
                    show-password
                    placeholder="请输入密码"
                    class="input-comp"
                    prefix-icon="el-icon-lock"
                    @keyup.enter="login"
                  >
                    <!-- <i slot="suffix" class="el-icon-edit"></i> -->
                  </el-input>
              </div>


              <div class="error-div">
                <p class="paragraph-content-small red">{{ error }}</p>
              </div>

              <el-button class="btn-login mt-5" @click="login" :loading="loading">
                登录
              </el-button>
              <el-button type="text" class="forgetPassWord" @click="forget">
                忘记密码?
              </el-button>

            </div>
        </div>

        <div class="login_main__bottom">
          <p id="lasttitle" class="mb-1">{{ $globalData.title }} 版权所有</p>
          <p id="lasttitle" class="mb-1">为了更好的使用体验，建议使用Chrome等主流浏览器</p>
          <p id="lasttitle">{{$globalData.icp}}</p>
        </div>        
      </div>
      <div class="login_page__background"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

// import { Aim } from '@element-plus/icons'

// import { State, Action, Getter } from "vuex-class";
// import Component from "vue-class-component";

// import { BaseVue } from "@/mixin/index";

// import { getCodeApi, phoneLoginApi } from "@/api/core/login/telLogin";
// import store from "@/store";
// const namespace: string = "profileModule";

export default defineComponent({
  name: 'LoginPage',

  // components:{
  //   Aim
  // },

  data(){
    return {
      username: "",
      password: "",
      error: "",
      loading: false,
      imgs : {
          login_banner: "/static/manager3/login/login_bg2.png",
          login_logo: "/static/manager3/logo.png",
          login_user: "/static/manager3/login/login_user.png",
          login_password: "/static/manager3/login/login_password.png",
        }
    }
  },

  methods:{
    login(){
      console.log("login")

      let userObj:any = {
        "username": this.username,
        "password": this.password,
      };

      (this as any).$store.dispatch("managercore/profiles/LoginByUsername",userObj)
        .then((r:any) => {
          console.log("on success" , r)

          this.$router.push("/dashboard");
        })
        .catch((r:any) => {
          console.log("on error" , r)
        })
        .finally(()=>{
          console.log("finally")
        })
      ;

    },

    forget(){
      console.log("forget")
    }
  },

  mounted(){
    console.log("on mounted LoginPage")
  },

  setup(){
    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})


// @Component
// export default class Login extends BaseVue {
//   @Action("LoginByUsername", { namespace }) LoginByUsername: any;
//   username: string = "";
//   password: string = "";
//   error: string = "";
//   loading: boolean = false;
//   redirect: string = "";
//   isPhone = false;
//   getCodeText: any = "获取验证码";
//   changeText = "手机验证码登录";
//   userPhone = ""; //手机号
//   codeText = ""; //验证码
//   canClick = true;
//   $message: any;
//   $router: any;
//   $alert: any;
//   login() {
//     if (this.username == null || this.username.length == 0) {
//       this.error = "请填写用户名！";
//       return;
//     }

//     this.loading = true;

//     const lf = {
//       u: this.username,
//       p: this.password,
//     };
//     // this.$router.push({ path: '/' });
//     this.LoginByUsername(lf)
//       .then(() => {
//         store.commit("profileModule/DelTabsInfo", [
//           {
//             path: "/dashboard",
//             query: {},
//             title: "首页",
//           },
//         ]);
//         this.$router.push({ path: "/" });
//       })
//       .catch((error: any) => {
//         console.log(error);
//       })
//       .finally(() => {
//         this.loading = false;
//       });
//   }

//   // 使用手机验证码登陆
//   phoneLogin() {
//     let phone = this.userPhone;
//     if (!/^1[3456789]\d{9}$/.test(phone)) {
//       this.error = "手机号码有误，请重填！";
//       return false;
//     }
//     if (!this.codeText) {
//       this.error = "请输入验证码！";
//       return false;
//     }
//     let code = this.codeText;
//     let data = {
//       phone,
//       code,
//     };
//     phoneLoginApi(data)
//       .then((res: any) => {
//         if (res.code == 0) {
//           this.$message.error(res.message);
//         }
//       })
//       .catch((error) => {
//         console.log(error);
//       });
//   }

//   forget() {
//     this.$alert("请直接联系管理人员获得密码！", "忘记密码", {
//       showConfirmButton: false,
//       closeOnClickModal: true,
//     });
//   }
//   // 更改登录方式
//   changePage() {
//     this.isPhone = !this.isPhone;
//     this.error = "";
//     if (!this.isPhone) {
//       this.changeText = "手机验证码登录";
//     }
//     if (this.isPhone) {
//       this.changeText = "用户名密码登录";
//     }
//   }
//   // 获取验证码
//   getCode() {
//     let phone = this.userPhone;
//     let _this: any = this;
//     if (!/^1[3456789]\d{9}$/.test(phone)) {
//       this.error = "手机号码有误，请重填！";
//       return false;
//     }
//     if (this.canClick) {
//       this.canClick = false;
//       let phone = _this.userPhone;
//       // 验证码接口
//       getCodeApi(phone)
//         .then((res) => {
//           console.log(123, res);
//         })
//         .catch((error) => {
//           console.log(error);
//         });
//       this.getCodeText = 60;
//       let CodeInterval = setInterval(() => {
//         if (this.getCodeText > 0) {
//           this.getCodeText -= 1;
//         } else {
//           clearInterval(CodeInterval);
//           this.canClick = true;
//           this.getCodeText = "重新获取验证码";
//         }
//       }, 1000);
//     }
//   }

// }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.login_page{
  width: 100%;
  height: 100%;
  display: flex;

  background-image: url("/static/manager3/login/login_bg.jpg");
  background-repeat: no-repeat;
  // background-position: left top;
  // background-size: 100% auto;
    background-position: center;
  background-size: cover;
}

.login_main__logo{
  margin: 46px 0 0 ;
  width: 100px;
}

.login_main{
  width: 455px;

  background-color: white;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.login_main__content{

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

}

.login_main_content__form{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: left;

  .login-form-title{
      width: 300px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: left;
      color: #3e1012;
  }
}


.btn-login {
  width: 300px;
  opacity: 1;
  background: #cd2d35;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
}

.forgetPassWord {
  text-decoration: underline;
  color: #3e1012;
}

#lasttitle {
  opacity: 1;
  font-size: 12px;
  font-weight: 500;
  color: #beacad;
}

.login_main__bottom{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.login_main__content__title{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    #title{
      color: #3e1012;
      font-size: 36px;
      font-weight: 700;
      margin-top: 0px;
      margin-bottom: 0px;
    }

    #subtitle{
      color: #b9a8a9;
      font-size: 16px;
      font-weight: 500;
    }
}

.login-form-title{
  margin-bottom: 10px;
}

</style>
